<template>
  <div class="detail">
    <header class="el-dialog__header show-close">
      <span role="heading" aria-level="2" class="el-dialog__title">
        {{ title }}
      </span>
    </header>
    <el-form :model="queryParams" ref="queryRef" :inline="true">

      <el-row :gutter="10">
        <el-col :span="10">
          <el-form-item label="病例编号" prop="idcardNum">
            <el-input v-model="queryParams.idcardNum" disabled placeholder="" clearable @keyup.enter="handleQuery" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="患者姓名" prop="userName">
            <el-input v-model="queryParams.userName" disabled placeholder="" clearable @keyup.enter="handleQuery" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="联系电话" prop="phone">
            <el-input v-model="queryParams.phone" disabled placeholder="" clearable @keyup.enter="handleQuery" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <!-- 24 4 4 4 4 4  -->
        <el-col :span="4">
          <el-form-item label="性别" prop="userGender">
            <el-input :value="queryParams.userGender == 1 ? '男' : '女'" disabled placeholder="" clearable
              @keyup.enter="handleQuery" />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="年龄" prop="userAge">
            <el-input v-model="queryParams.userAge" disabled placeholder="" clearable @keyup.enter="handleQuery" />
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="身高" prop="userHeight">
            <el-input v-model="queryParams.userHeight" disabled placeholder="" clearable @keyup.enter="handleQuery" />
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="体重" prop="userWeight">
            <el-input v-model="queryParams.userWeight" disabled placeholder="" clearable @keyup.enter="handleQuery" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="婚否" prop="userIsMarry">
            <el-input :value="queryParams.userIsMarry ? '已婚' : '未婚'" disabled placeholder="" clearable
              @keyup.enter="handleQuery" />
          </el-form-item>
        </el-col>
      </el-row>

    </el-form>
  </div>
</template>

<script setup>
const props = defineProps({
  queryParams: {
    type: Object,
    default: () => {
      return {
        caseNumber: '',
        patientName: '',
        phone: '',
        sex: '',
        age: '',
        height: '',
        weight: '',
        marriage: ''
      }
    },
  },
  title: {
    type: String,
    default: '病历档案详情'
  }
})

const queryParams = ref(props.queryParams)



watch(props.queryParams, (newVal) => {
  // console.log(newVal, "newVal");
  // queryParams.value = newVal
  // props.queryParams = newVal
})

const queryRef = ref(null)

const handleQuery = () => {
  // console.log(props.queryParams)
}

</script>
<style lang='scss' scoped>
.detail {
  :deep(.el-input__wrapper.is-focus) {
    box-shadow: none !important;
  }

  :deep(.el-input__wrapper:hover) {
    box-shadow: none !important;
  }

  :deep(.el-input__wrapper) {
    box-shadow: none !important;
  }

  :deep(.el-input.is-disabled .el-input__wrapper) {
    background-color: #ffff !important;
  }

  :deep(.el-input.is-disabled .el-input__inner) {
    color: #000 !important;
    -webkit-text-fill-color: #000 !important;
  }

  :deep(.el-textarea__inner) {
    background-color: #ffff !important;
    border: none !important;
    box-shadow: none !important;
    color: #000 !important;
    -webkit-text-fill-color: #000 !important;
  }
}
</style>